<template>
    <a-tree-select :placeholder="props.placeholder" class="w-full" @change="inputVal" allowClear v-model:value="state.value" :showSearch="showSearch" :treeData="props.options" :filterTreeNode="filterOption">
    </a-tree-select>
</template>
<script setup>
const emits = defineEmits(["update:value", "change"]);
const props = defineProps({
    value: undefined,
    placeholder: {
        type: undefined,
        default: "请填写",
    },
    options: {
        type: Array,
        default: [],
    },
    showSearch: {
        type: Boolean,
        default: true,
    },
});
const state = reactive({
    value: undefined,
    options: [],
});
watch(
    () => props.value,
    (newVal) => {
        if (newVal === null || newVal === "" || newVal === undefined) {
            state.value = undefined;
        } else {
            state.value = props.value;
        }
    },
    { deep: true, immediate: true }
);
watch(
    () => props.options,
    (newVal) => {
        //state.options = newVal;
    },
    { deep: true, immediate: true }
);

const inputVal = (val, item) => {
    if (item === undefined) {
        emits("update:value", undefined);
    } else {
        emits("update:value", state.value);
    }
    emits("change", state.value, item);
};
const filterOption = (input, option) => {
    if (option.label.indexOf(input) > -1) {
        return true;
    } else {
        return false;
    }
};

defineExpose({});
const {} = toRefs(state);
</script>

